<!--BOM组成-->
<template>
    <div>
        <el-dialog v-model="dialogVisible" width="550" align-center :before-close="handleClosed">
            <el-form inline style="margin-left: 20px;margin-right: 20px" title="编辑物料信息" v-model="form">
                <el-form-item label="">
                    <div class="main-title">{{ form.name }}</div>
                </el-form-item>
                <el-form-item label="编码">
                    <div class="info">{{ form.idMat }}</div>
                </el-form-item>
                <el-form-item label="规格">
                    <div class="info">{{ form.model }}</div>
                </el-form-item>
                <el-form-item label="单位">
                    <div class="info">{{ form.unit }}</div>
                </el-form-item>
                <el-form-item label="使用比例">
                    <el-input-number v-model="queryData.prop" :precision="1" :step="0.1"
                                     style="width: 200px"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button @click="handleClosed">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import bomAPI from "@/util/request-md/bom/bom.js";

export default {
    emits: ['callClosed','info','callSaveSuccess'],
    props: ['visible', 'bomData'],
    data() {
        return {
            dialogVisible: false,
            form: {
                idMat: '10111',//物料id
                name: '钢铁',//物料名称
                model: 'SASCA1001',//型号
                unit: '公斤',//单位名称
                prop: '0.8'//使用比例
            },
            queryData: {
                prop: ''//使用比例
            }
        }
    },
    watch: {
        visible(val) {
            this.dialogVisible = val;
            this.form = this.bomData;
            console.log(this.from, ">>>>>FORM数据");
            this.queryData.prop = this.form.prop;
        }
    },
    methods: {
        handleClosed() {
            this.$emit('callClosed');
        },
        handleSave() {
            console.log(this.bomData,">>>bomData")
            bomAPI.updateBom({prop:this.queryData.prop,matId:this.bomData.matId,orderId:this.bomData.orderId},this.bomData.proId,(res)=>{
                if(res.code === 200){
                    this.$message({
                        type: 'success',
                        message: '保存成功!',
                    });
                    this.$emit('callSaveSuccess');
                    // this.$emit('info');
                }else{
                    this.$message.error("保存异常"+res.code);
                }
            })
        }
    }
}
</script>
<style scoped>
.dialog-footer {
    text-align: center;
}
</style>